<template>
	<view class="container">
		<cu-tabbar :datas="tabs" @onchange="onSwitchTab"></cu-tabbar>
		<view class="flex justify-between padding-sm bg-white align-center margin-top-xs">
			<view>
				<view>
					<text class="text-blod text-size-32 text-black">店铺名称</text>
					<text class="cuIcon-roundright margin-left-sm"></text>
				</view>
				<view class="margin-top-xs">
					<text class="cu-tag round bg-red sm">天猫</text>
					<text class="margin-left-sm">综合体验</text>
					<text class="cuIcon-favorfill text-red"></text>
					<text class="cuIcon-favorfill text-red"></text>
					<text class="cuIcon-favorfill text-red"></text>
					<text class="cuIcon-favorfill text-red"></text>
					<text class="cuIcon-favorfill text-red"></text>
					<text>粉丝数435万</text>
				</view>
			</view>
			<view class="cu-tag line-orange round">
				<text class="cuIcon-favor"></text>
				<text class="margin-left-sm">关注</text>
			</view>
		</view>
		<view class="padding-xs">
			<cu-swiper></cu-swiper>
			
			<cu-grid-media cols="2" :datas="goods" @onchange="onSelectItem"></cu-grid-media>
			<view style="height: 100rpx;margin-top: 1rem;"></view>
		</view>
		<view class="fixed foot">
			<view class="cu-bar tabbar  bg-black">
				<view class="action text-orange">
					<view class="cuIcon-homefill"></view> 首页
				</view>
				<view class="action text-gray">
					<view class="cuIcon-similar"></view> 全部宝贝
				</view>
				<view class="action text-gray">
					<view class="cuIcon-recharge"></view>
					店铺微淘
				</view>
				<view class="action text-gray">
					<view class="cuIcon-cart">
						<view class="cu-tag badge">99</view>
					</view>
					宝贝分类
				</view>
				<view class="action text-gray">
					<view class="cuIcon-my">
						<view class="cu-tag badge"></view>
					</view>
					店铺会员
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuSwiper from '@/components/diy/content/cu-swiper.vue';
	import cuTitle from '@/components/diy/content/cu-title.vue';
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	import cuTabbar from '@/components/diy/header/cu-tabbar.vue';
	export default {
		computed: {
			...mapState([])
		},
		components: {
			cuTabbar,
			cuSwiper,
			cuTitle,
			cuGridMedia
		},
		data() {
			return {
				tabs: [{
				
						name: '推荐',
						color: 'red',
						cuIcon: 'btn'
					},
					{
				
						name: '宝贝',
						color: 'red',
						cuIcon: 'btn'
					},
					{
				
						name: '新品',
						color: 'red',
						cuIcon: 'btn'
					}
					
				],
				bg: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
			
				swiperList: [{
						id: 0,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
					},
					{
						id: 1,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg'
					},
					{
						id: 2,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					}
				],
				parameter: {},
				goods: [{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}, {
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					},
					{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}, {
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					},
					{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}, {
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}
				]
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad(prop) {
			console.log(prop.title);
			this.parameter = prop;
		},
		onShow() {
			
		},
		methods: {
			...mapMutations(['logout', 'login', 'loginsoure']),
			onSelectItem:function(e){
				
				if(this.current==0){
					let good=this.goods[e];
					this.$util.redirectTo('/pages/shop/child/goodsdetail',{title:good.name})
				}else{
					this.$util.showAlert("没有商品详情")
				}
				console.log(e)
			}

		}
	};
</script>

<style scoped></style>
